<!--form表单的文本框组件-->
<template>
  <!-- <el-form-item :label="config.label" :label-width="config.labelW" :rules="config.rules" :prop="config.name" :style="config.formItemStyle" :class="config.formItemClass"> -->
  <el-input :size="config.size" v-model="form.data.textarea" :disabled="disabled" :class="config.childClass" :placeholder="config.placeholder" :maxlength="maxlength" :show-word-limit="config.isShowLimit || false" type="textarea" />
  <!-- </el-form-item> -->
</template>

<script>
export default {
  name: 'FormTextarea',
  props: {
    config: {
      type: Object,
      required: false,
      default: () => {
        return {
          isShowLimit: false,
          label: '文本框',
          name: 'textarea',
          maxlength: '500',
          placeholder: '请填写文本框输入',
          rules: [
            { required: true, message: '请输入文本框输入', trigger: 'blur' }
          ]
        }
      }
    },
    // 组件循环时需要的idx值
    idx: {
      type: [Number, String],
      default: 0
    },
    // 是否可编辑
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    data: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      form: {
        data: {
          textarea: ''
        }
      }
    }
  },
  computed: {
    maxlength () {
      let val = 5000
      if (!this.$validate.isNull(this.config.maxlength)) {
        val = this.config.maxlength
      }
      return val
    }
  },
  watch: {
    data: {
      handler (val) {
        this.form.data.textarea = val
      },
      deep: true,
      immediate: true
    },
    form: {
      handler (val) {
        this.$emit('updateForm', '' + this.config.name, this.form.data.textarea, this.idx, this.config)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss">
</style>
